<template>
  <Field
    v-if="showType === 'edit' && !base64"
    :border="border"
    :name="name"
    :label="label"
    :labelWidth="labelWidth"
    :disabled="disabled"
    :placeholder="placeholder"
    :type="type"
    :rules="rules"
  >
    <template #input>
      <van-uploader
        v-model="currentValue"
        @input="$emit('change', currentValue, name)"
        :max-count="maxCount"
        :max-size="maxSize"
        :accept="accept"
        :before-read="beforeRead"
      >
        <slot>
          <van-button icon="photo" type="primary" @click.prevent="() => false">上传文件</van-button>
        </slot>
      </van-uploader>
    </template>
  </Field>
  <Field
    v-else-if="showType === 'view' || base64"
    :border="border"
    :name="name"
    :readonly="true"
    :label="label"
    :labelWidth="labelWidth"
    type="input"
    :rules="base64 ? rules : undefined"
  >
    <template #input>
        <van-uploader v-model="currentValue" v-show="false" />
      <div>
        <van-image
          :width="width"
          :height="height"
          :fit="fit"
          v-for="(o, i) of viewValueFn(currentValue)"
          :key="i"
          :src="o.url"
          @click="view(viewValueFn(currentValue), i)"
          class="van-image-item"
        />
        <div @click="addFile" v-show="base64">
          <slot>
            <van-button @click.prevent icon="photo" size="small" type="info">上传图片</van-button>
          </slot>
        </div>
      </div>
    </template>
  </Field>
</template>

<script>
import common from './item'
import {
  Uploader as vanUploader,
  Image as vanImage,
  ImagePreview,
  Button as vanButton,
  Toast
} from 'vant'
export default {
  mixins: [common],
  components: {
    vanUploader,
    vanImage,
    vanButton
  },
  computed: {
    // 图片宽高
    width () {
      let o = this.info
      return o.width || '100'
    },
    height () {
      let o = this.info
      return o.height || '100'
    },
    fit () {
      let o = this.info
      return o.fit || 'fill'
    },
    // 数量限制
    maxCount () {
      let o = this.info
      return o.maxCount || 5
    },
    // 大小限制
    maxSize () {
      let o = this.info
      return o.maxSize || 3 * 1024 * 1024
    },
    accept () {
      let o = this.info
      return o.accept || 'image/*'
    },
    /**
     * 传入的上传方法：
     * 方法默认返回格式：
     * { data: { url: 'xxx' }, success: true, message: '' }
     * 如果base64为真，则表示调起第三方上传
     */
    uploadFn () {
      let { uploadFn } = this.info
      return uploadFn
    },
    base64 () {
      return this.info.base64 || false
    }
  },
  methods: {
    view (list, i) {
      ImagePreview({
        images: list.map(o => o.url),
        startPosition: i,
        closeable: true
      })
    },
    // 返回布尔值
    beforeRead (file) {
      console.log('beforeRead: ', file)
      return true
    },
    async addFile () {
      if (this.uploadFn) {
        this.$emit('update', true)
        let { success, data, message } = await this.uploadFn()
        this.$emit('update', false)
        if (success) {
          let url = data.url
          console.log('文件获取成功...', url)
          if (Array.isArray(data)) {
            this.currentValue = this.currentValue.concat(data)
          } else {
            this.currentValue.push(data)
          }
        }
        Toast(message)
      }
    }
  }
}
</script>

<style lang="css">
.van-image-item + .van-image-item {
  margin-left: 8px;
}
</style>
